<template>
    <div class="wrap">
        <!-- 标题 -->
        <van-nav-bar
            title="我的订单"
            right-text="历史订单"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
        />
        <!-- 订单导航 -->
        <van-tabbar v-model="active" active-color="#CA013D">
            <van-tabbar-item 
                v-for="(value,index) in myOrder"
                :key="index"
                @click="changeMyOrder(index)" >{{value}}
            </van-tabbar-item>
        </van-tabbar>
        <!-- 订单为空 -->
        <div class="empty" v-show="!show">
            <van-empty description="你还没有相关订单" />
            <van-button round type="danger" class="bottom-button" @click="goShopping">去逛逛吧</van-button>
        </div>
        <div class="hasOrder" v-show="show">
            <ul class="goods">
                <li><span><van-icon name="bar-chart-o" />APP</span><i>待付款</i></li>
                <li>
                    <img src="" alt="">
                    <div>
                        <p>服务端渲染的应用是相当复杂的。幸</p>
                        <span>服务端渲染的应用是相当复杂的。幸</span>
                        <i>￥26</i>
                    </div>
                    <span>X1</span>
                </li>
                <li>
                    <van-button type="default" color="#ddd">取消订单</van-button>
                    <van-button type="default" color="#ddd">查看详情</van-button>
                    <van-button type="default" color="#CD003D">立即支付</van-button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
    data() {
        return {
            active: 0,
            myOrder:['全部','待付款','待付款','配送中','已完成'],
            orders:0,
            show:false
        };
    },

    components: {},

    computed: {},

    mounted() {
        let index=Number(this.$route.params.index)+1
        this.active=index
        this.changeMyOrder(index)
        if(this.orders){
            this.show=true
        }else{
            this.show=false
        }
    },

    methods: {
        onClickLeft() {     // 左箭头回退
            this.$router.go(-1)
            this.$store.commit('changeShowMine',true)
        },
        onClickRight() {    // 进入历史订单
            this.$router.push('/mine/InMine/history')
        },
        changeMyOrder(index){   // 改变我的订单选项
            console.log(index);
        },
        goShopping(){   // 回到首页
             this.$router.push('/')
        } 
    }
};
</script>
<style lang='stylus' scoped>

.wrap 
    background #fff
    position absolute
    top 0
    left 0
    right 0
    bottom 0
// 改变Vant默认颜色
/deep/ .van-nav-bar__text 
   color #CA013D 
/deep/ .van-nav-bar__arrow
    color #4E4E4E

// 订单导航
.van-tabbar--fixed
    top 48px

// 订单为空
.van-empty
    position absolute
    top 100px
    left 0
    right 0
    bottom 0
    z-index 300
    padding-bottom 300px
    background #fff
.bottom-button 
    width 330px
    height 40px
    border-radius 0
    position absolute
    top 450px
    left 0
    right 0
    margin 0 auto
    z-index 350
// 有订单
.hasOrder
    position absolute
    top 100px
    left 0
    right 0
    bottom 0
    z-index 300
    padding-bottom 300px
    background #eee
    font-size 12px
    .goods
        margin-top 9px
        background #fff
        padding 0 16px
        li
            display flex
            justify-content space-between
            border-bottom 1px solid #eee
            &:last-of-type
                justify-content flex-end
                .van-button
                    margin-left 5px
    
</style>
